import NavBar from "@/components/menus/NavBar";
import UserTag from "@/components/user/UserTag";
import { Avatar, Button, Image, FloatingPanel, Tag } from "@taroify/core";
import { ScrollView, View } from "@tarojs/components";
import { ArrowDown, ArrowLeft, WechatPay } from "@taroify/icons";
import { useCallback, useEffect, useMemo, useState } from "react";
import Taro, { useLoad } from "@tarojs/taro";
import UserBarCard from "@/components/user/UserBarCard";
import ScrollMenu from "@/components/menus/ScrollMenu";
import ArticleCard from "@/components/article/ArticleCard";
import { ArticleCardType } from "@/types";
import { getSectorInfosApi, searchPostInfosApi } from "@/api";
import { imgAddPrefix } from "@/utils";

export default () => {
  useLoad((props) => setId(props.id));

  const [id, setId] = useState("");
  const [articles, setArticles] = useState<any[]>([]);
  const getSectorInfo = useCallback(() => {
    if (id) {
      getSectorInfosApi(id).then((res) => setInfo(res));
    }
  }, [id]);
  useEffect(() => {
    getSectorInfo();
  }, [id, getSectorInfo]);
  const windowHeight = useMemo(() => Taro.getSystemInfoSync().windowHeight, []);
  const anchors = useMemo(
    () => [windowHeight - 450, windowHeight - 190, windowHeight - 100],
    [windowHeight]
  );
  const [loading, setLoading] = useState(false);
  const [reachTop, setReachTop] = useState(true);
  const [title, setTitle] = useState(true);
  const [info, setInfo] = useState<any>({});
  const pager = {
    pageNum: 0,
    pageSize: 20,
  };

  function getArticles() {
    pager.pageNum++;
    searchPostInfosApi({ sectorId: id, ...pager }).then((res) => {
      console.log(res);
      // setArticles((articles) => [...articles, ...res.records]);
    });
  }

  function handleChange(e) {
    if (anchors[1] <= e) setTitle(false);
    else setTitle(true);
  }

  function changeMenu(e) {
    console.log(e);
  }
  const testData: ArticleCardType = {
    user: {
      avatar: "http://127.0.0.1:9999/statics/admin.jpg",
      username: "瑶瑶混日子",
      kid: "1864273892504383489",
      email: "3034221968@qq.com",
      phone: "17508561337",
      address: "局域网",
      sex: "2",
      ipAddr: "192.168.1.11",
      blackGround: "http://localhost:9999/statics/background/back.jpg",
      password: "1d9751757881f4c3fd1f840eccc532d4",
    },
    article: {
      kid: "1",
      context: "笑死我了。\n不是，这是什么鬼",
      title: "文章示例",
      createTime: "2024-10-10",
      contextUrl:
        "http://localhost:9999/statics/touste.jpg,http://localhost:9999/statics/video.jpg",
      // video:
      //   "http://127.0.0.1:9999/post/display?fileName=http://192.168.1.11:9000/forum/20241217/7b0062ae-daea-4076-9d86-cd105d0a344d.mp4",
    },
  };

  return (
    <NavBar
      left={
        !title && (
          <View className="flex gap-1 items-center">
            <ArrowLeft onClick={() => Taro.navigateBack()} size={24} />
            <Avatar size="small" src={imgAddPrefix(info.sectorUrl)} />
            <View>{info.sectorName}</View>
          </View>
        )
      }
      title={
        title && (
          <View className="p-1 text-white text-xs rounded-full items-center bg-black opacity-50 flex">
            <Avatar.Group limit={2}>
              {info.smaUserInfo?.map((item) => (
                <Avatar
                  key={item.kid}
                  size="mini"
                  src={imgAddPrefix(item.avatar)}
                />
              ))}
            </Avatar.Group>
            <View>快啦加入吧</View>
            <ArrowDown />
          </View>
        )
      }
    >
      <View className="p-3">
        <UserTag reload={getSectorInfo} right=" " data={info} size="large" />
      </View>
      <ScrollView
        scrollX
        className="pl-3 box-border overflow-x-auto whitespace-nowrap"
      >
        <UserBarCard />
        <UserBarCard />
      </ScrollView>
      <View className="p-3 ">
        <View className="text-base">更多功能</View>
        <View className="grid grid-cols-2 gap-2">
          <View className="bg-[#2A3763] text-base text-white p-3 rounded-2xl flex gap-2 justify-center items-center">
            <WechatPay size={26} />
            <View>微信支付</View>
          </View>
        </View>
      </View>
      <FloatingPanel
        handleChange={handleChange}
        anchors={anchors}
        height={anchors[1]}
      >
        <View className="px-2">
          <ScrollMenu
            change={changeMenu}
            className="text-lg"
            defaultIndex={1}
            bar
          >
            <ScrollMenu.Item title="精华">123</ScrollMenu.Item>
            <ScrollMenu.Item title="热门">
              <View className="grid grid-cols-1 gap-3 mt-2">
                <View className="bg-white shadow rounded-xl text-sm flex px-3 py-4">
                  <Tag color="primary" variant="outlined">
                    置顶
                  </Tag>
                  <View className="w-10/12 truncate ml-2">
                    [公告]关于策划小收到是对啊撒的撒更多Iasi
                  </View>
                </View>
                <ArticleCard {...testData} />
              </View>
            </ScrollMenu.Item>
            <ScrollMenu.Item title="最新">123</ScrollMenu.Item>
            <ScrollMenu.Item title="视频">123</ScrollMenu.Item>
            <ScrollMenu.Item title="活动">
              <View>
                <Image
                  width={200}
                  height={200}
                  mode="scaleToFill"
                  src="https://img.yzcdn.cn/vant/cat.jpeg"
                />
              </View>
            </ScrollMenu.Item>
          </ScrollMenu>
        </View>
      </FloatingPanel>
    </NavBar>
  );
};
